<template>
    <div class="bottom">
        <div class="block">
            <el-pagination v-model:currentPage="pageination.pageNum" v-model:page-size="pageination.pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 40]" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive } from 'vue'
interface Props {
    total: number
}

const { total } = defineProps<Props>()

const emit = defineEmits<{
    (e: 'gethandleSize', val: number): void
    (e: 'gethandleCurrent', val: number): void

}>()

const pageination = reactive({
    total: 0,
    pageNum: 1,
    pageSize: 10,
});

const handleSizeChange = (val: number) => {
    emit('gethandleSize', pageination.pageSize)
}
const handleCurrentChange = (val: number) => {
    emit('gethandleCurrent', pageination.pageNum)
}

</script>
    
<style scoped lang="less">
.bottom {
    display: flex;
    margin-top: 10px;
    justify-content: end;
}
</style>